<template>
    <div class="screen">
        <div class="shimmer-background"></div>
        <header class="topbar">
            <button class="icon-btn" @click="goBack" aria-label="back">
                <svg viewBox="0 0 24 24" width="24" height="24">
                    <path fill="currentColor" d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
                </svg>
            </button>
            <div class="topbar-right">
                <button class="icon-btn notification-btn" @click="noop" aria-label="notifications">
                    <svg viewBox="0 0 24 24" width="24" height="24">
                        <path fill="currentColor" d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
                    </svg>
                    <span class="badge">8</span>
                </button>
            </div>
        </header>

        <!-- 固定区域：头像、VIP、酷币、装备 -->
        <div class="fixed-content">
            <section class="profile">
                <div class="avatar">
                    <img :src="avatarUrl" alt="avatar" />
                    <span class="vip-badge">VIP</span>
                </div>
                <h1 class="nickname">{{ username }}</h1>
                <p class="alias">（不上岸不改名）</p>
                <button class="vip-btn" @click="noop">成为终身大会员 6天 ></button>
            </section>

            <section class="summary-grid">
                <!-- 酷币卡片 -->
                <div class="card coins-card">
                    <div class="card-title">酷币</div>
                    <div class="coins-row">
                        <svg class="coin-icon" viewBox="0 0 24 24" width="24" height="24">
                            <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.31-8.86c-1.77-.45-2.34-.94-2.34-1.67 0-.84.79-1.43 2.1-1.43 1.38 0 1.9.66 1.9 1.64h1.71c0-.93-.56-2.01-2.45-2.62V5H10.9v2.64c-1.7.39-2.8 1.4-2.8 2.77 0 1.72 1.39 2.84 3.57 3.28 1.95.5 2.34 1.15 2.34 1.97 0 .77-.62 1.33-1.88 1.33-1.51 0-2.14-.73-2.14-1.75H7.04c.05 1.95 1.16 2.95 3.14 3.26V19h2.34v-2.67c1.95-.29 3.18-1.41 3.18-2.92 0-1.81-1.34-2.75-3.15-3.19z"/>
                        </svg>
                        <span class="coin-num">6,460</span>
                    </div>
                </div>

                <!-- 装备卡片 -->
                <div class="card equips-card">
                    <div class="card-header">
                        <div class="card-title">装备</div>
                        <div class="equip-progress">8/9 ></div>
                    </div>
                    <div class="equip-strip">
                        <div v-for="(equip, idx) in equips" :key="idx" class="equip-item" :style="{ background: equip.bg }">
                            <div class="equip-icon">{{ equip.icon }}</div>
                        </div>
                    </div>
                </div>
            </section>
        </div>

        <!-- 可滚动区域：设置列表 -->
        <div class="scrollable-content">
            <div class="settings-card">
                <button class="setting-item" @click="noop">
                    <div class="setting-icon" style="background: #10b981;">🎨</div>
                    <span class="label">外观 & 沉浸场景</span>
                    <span class="arrow">></span>
                </button>
                <button class="setting-item" @click="noop">
                    <div class="setting-icon" style="background: #8b5cf6;">⚙️</div>
                    <span class="label">学习设置</span>
                    <span class="arrow">></span>
                </button>
                <button class="setting-item" @click="goToMoreSettings">
                    <div class="setting-icon" style="background: #3b82f6;">🔧</div>
                    <span class="label">更多设置</span>
                    <span class="arrow">></span>
                </button>
                <button v-for="n in 16" :key="'more-'+n" class="setting-item ghost" @click="noop">
                    <div class="setting-icon" style="background: #9ca3af;">•</div>
                    <span class="label">占位设置项 {{ n }}</span>
                    <span class="arrow">></span>
                </button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { onMounted } from 'vue'
import { useUserAvatar } from '@/composables/useUserAvatar.js'
import { useUserInfo } from '@/composables/useUserInfo.js'

const router = useRouter()
const { avatarUrl } = useUserAvatar()
const { username, updateUsername } = useUserInfo()

// 页面加载时，从 localStorage 读取用户名
onMounted(() => {
    const storedUsername = localStorage.getItem('username')
    if (storedUsername) {
        updateUsername(storedUsername)
    }
})

const equips = [
    { icon: '📁', bg: 'linear-gradient(135deg, #fde68a, #f59e0b)' },
    { icon: '📘', bg: 'linear-gradient(135deg, #60a5fa, #3b82f6)' },
    { icon: '🌐', bg: 'linear-gradient(135deg, #f97316, #ea580c)' },
    { icon: '✏️', bg: 'linear-gradient(135deg, #60a5fa, #3b82f6)' },
    { icon: '≈', bg: 'linear-gradient(135deg, #f97316, #ea580c)' },
    { icon: '🎨', bg: 'linear-gradient(135deg, #fde68a, #f59e0b)' },
    { icon: '📓', bg: 'linear-gradient(135deg, #60a5fa, #3b82f6)' },
    { icon: '📄', bg: 'linear-gradient(135deg, #60a5fa, #3b82f6)' },
]

function goBack() { router.back() }
function goToMoreSettings() { router.push('/more-settings') }
function noop() {}
</script>

<style scoped>
.screen {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 25%, #fcd34d 50%, #fbbf24 75%, #f59e0b 100%);
    background-size: 400% 400%;
    animation: shimmer 8s ease infinite;
}

.shimmer-background {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 0%, transparent 60%);
    animation: shimmerMove 12s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shimmer {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes shimmerMove {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

.topbar {
    position: relative;
    z-index: 1;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    flex-shrink: 0;
    background: transparent;
}

.icon-btn { 
    border: none; 
    background: transparent; 
    color: #0f172a; 
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.notification-btn {
    position: relative;
}

.badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    line-height: 1.2;
}

/* 固定内容区域 */
.fixed-content {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    padding: 8px 0 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    box-sizing: border-box;
}

.profile { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 8px; 
}

.avatar { 
    position: relative; 
    width: 96px; 
    height: 96px; 
    border-radius: 50%; 
    overflow: hidden; 
    box-shadow: 0 6px 18px rgba(0,0,0,.15); 
}

.avatar img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.vip-badge { 
    position: absolute; 
    right: -4px; 
    bottom: -4px; 
    background: #10b981; 
    color: #fff; 
    font-weight: 700; 
    font-size: 11px; 
    border-radius: 999px; 
    padding: 2px 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
}

.nickname { 
    margin: 0; 
    font-size: 20px; 
    color: #111827; 
    font-weight: 700;
}

.alias {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
}

.vip-btn { 
    border: none; 
    background: rgba(255, 245, 225, 0.9); 
    color: #111827; 
    padding: 8px 12px; 
    border-radius: 999px; 
    cursor: pointer; 
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    font-size: 14px;
    font-weight: 500;
}

.summary-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 16px; 
    width: 100%; 
    box-sizing: border-box;
}

.card { 
    background: rgba(255,255,255,.95); 
    backdrop-filter: blur(6px); 
    border-radius: 16px; 
    box-shadow: 0 8px 24px rgba(0,0,0,.08); 
    padding: 16px; 
}

.card-title { 
    color: #111827; 
    font-weight: 600; 
    margin-bottom: 8px;
    font-size: 14px;
}

.coins-row { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    font-size: 20px; 
    font-weight: 700; 
    color: #111827; 
}

.coin-icon {
    color: #f59e0b;
}

.coin-num {
    color: #111827;
}

.equips-card {
    overflow: hidden;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.equip-progress {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

.equip-strip { 
    display: flex; 
    gap: 12px; 
    overflow-x: auto; 
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}

.equip-strip::-webkit-scrollbar {
    display: none;
}

.equip-item { 
    width: 44px; 
    height: 44px; 
    border-radius: 12px; 
    box-shadow: 0 2px 6px rgba(0,0,0,.1); 
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.equip-icon {
    font-size: 20px;
}

/* 可滚动内容区域 */
.scrollable-content {
    position: relative;
    z-index: 1;
    flex: 1;
    overflow-y: auto;
    padding: 0 0 24px;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.settings-card {
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(6px);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    overflow: hidden;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

.setting-item { 
    display: grid; 
    grid-template-columns: 40px 1fr auto; 
    align-items: center; 
    gap: 12px; 
    padding: 14px 16px; 
    background: transparent; 
    border: none; 
    border-bottom: 1px solid rgba(0,0,0,.06); 
    cursor: pointer; 
    color: #111827; 
    text-align: left;
    width: 100%;
    transition: background 0.2s;
}

.setting-item:last-child { 
    border-bottom: none; 
}

.setting-item:hover {
    background: rgba(0,0,0,.02);
}

.setting-item.ghost { 
    color: #6b7280; 
}

.setting-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.label { 
    font-size: 16px; 
    font-weight: 500;
}

.arrow { 
    color: #9ca3af; 
    font-weight: 700;
    font-size: 18px;
}
</style>
